<style lang="less">
</style>
<template>
  <div class="search">
    <Row>
      <Col>
      <Card>
        <Row>
          <Form ref="searchForm"
                :model="searchForm"
                inline
                :label-width="100"
                class="search-form">
            <Form-item label="bean名称">
              <Input type="text"
                     v-model="searchForm.beanName"
                     clearable
                     placeholder="请输入bean名称"
                     style="width: 200px" />
            </Form-item>
            <Form-item style="margin-left:-35px;"
                       class="br">
              <Button @click="handleSearch"
                      type="primary"
                      icon="ios-search">搜索</Button>
              <Button @click="handleReset">重置</Button>
            </Form-item>
          </Form>
        </Row>
        <Row class="operation">
          <Button @click="add"
                  type="primary"
                  icon="md-add"
                  v-has="'add'">添加任务</Button>
          <circleLoading v-if="operationLoading" />
        </Row>
        <!-- <Row>
          <Alert show-icon>
            已选择
            <span class="select-count">{{selectCount}}</span> 项
            <a class="select-clear"
               @click="clearSelectAll">清空</a>
          </Alert>
        </Row> -->
        <Row>
          <Table :loading="loading"
                 max-height="600"
                 border
                 :columns="columns"
                 :data="data"
                 sortable="custom"
                 @on-sort-change="changeSort"
                 @on-selection-change="showSelect"
                 ref="table"></Table>
        </Row>
        <Row type="flex"
             justify="end"
             class="page">
          <Page :current="searchForm.current"
                :total="total"
                :page-size="searchForm.size"
                @on-change="changePage"
                @on-page-size-change="changePageSize"
                :page-size-opts="[10,20,50,100]"
                size="small"
                show-total
                show-elevator
                show-sizer></Page>
        </Row>
      </Card>
      </Col>
    </Row>
    <Modal :title="modalTitle"
           v-model="scheduleModalVisible"
           :mask-closable="false"
           :width="500"
           :styles="{top: '30px'}">
      <Form ref="scheduleForm"
            :model="scheduleForm"
            :label-width="100"
            :rules="scheduleFormValidate">
        <FormItem label="bean名称"
                  prop="beanName">
          <Input v-model="scheduleForm.beanName"
                 autocomplete="off" />
        </FormItem>
        <Form-item label="方法名称"
                   prop="methodName">
          <Input v-model="scheduleForm.methodName"></Input>
        </Form-item>
        <FormItem label="参数"
                  prop="params">
          <Input v-model="scheduleForm.params" />
        </FormItem>
        <FormItem label="cron表达式"
                  prop="cronExpression">
          <Input v-model="scheduleForm.cronExpression" />
        </FormItem>
        <FormItem label="备注">
          <Input v-model="scheduleForm.remark" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text"
                @click="scheduleModalVisible = false">取消</Button>
        <Button type="primary"
                :loading="submitLoading"
                @click="submitSchedule">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  getSchedulePageList,
  addSchedule,
  updateSchedule,
  deleteSchedule,
  pauseSchedule,
  resumeSchedule,
  runSchedule
} from '@/api/index'
import circleLoading from '../../my-components/circle-loading.vue'
export default {
  name: 'schedule-manage',
  components: {
    circleLoading
  },
  data() {
    return {
      switchVal: true,
      loading: true,
      operationLoading: false,
      selectCount: 0,
      selectList: [],
      searchForm: {
        beanName: '',
        current: 1,
        size: 20,
        sort: 'createTime',
        order: 'desc'
      },
      modalType: 0,
      scheduleModalVisible: false,
      modalTitle: '',
      scheduleForm: {
        jobId: '',
        beanName: '',
        methodName: '',
        params: '',
        cronExpression: '',
        remark: ''
      },
      scheduleFormValidate: {
        beanName: [
          { required: true, message: 'bean名称不能为空', trigger: 'blur' }
        ],
        methodName: [
          { required: true, message: '方法名称不能为空', trigger: 'blur' }
        ],
        params: [{ required: true, message: '参数不能为空', trigger: 'blur' }],
        cronExpression: [
          { required: true, message: 'cron表达式不能为空', trigger: 'blur' }
        ]
      },
      submitLoading: false,
      columns: [
        // {
        //   type: 'selection',
        //   width: 60,
        //   align: 'center',
        //   fixed: 'left'
        // },
        {
          title: '序号',
          type: 'index',
          width: 65,
          align: 'center',
          fixed: 'left'
        },
        {
          title: 'bean名称',
          key: 'beanName',
          minWidth: 100,
          sortable: true,
          fixed: 'left'
        },
        {
          title: '方法名称',
          key: 'methodName',
          width: 200
        },
        {
          title: '参数',
          key: 'params',
          width: 150,
          sortable: true
        },
        {
          title: 'cron表达式',
          key: 'cronExpression',
          width: 200,
          sortable: true
        },
        {
          title: '备注',
          key: 'remark',
          width: 200,
          align: 'center'
        },
        {
          title: '状态',
          key: 'status',
          align: 'center',
          width: 140,
          render: (h, params) => {
            if (params.row.status == 0) {
              return h('div', [
                h('Badge', {
                  props: {
                    status: 'success',
                    text: '正常启用'
                  }
                })
              ])
            } else {
              return h('div', [
                h('Badge', {
                  props: {
                    status: 'error',
                    text: '暂停'
                  }
                })
              ])
            }
          },
          filters: [
            {
              label: '正常启用',
              value: 0
            },
            {
              label: '暂停',
              value: 1
            }
          ],
          filterMultiple: false,
          filterMethod(value, row) {
            if (value == 1) {
              return row.status == 1
            } else {
              return row.status == -1
            }
          }
        },
        {
          title: '创建时间',
          key: 'createTime',
          sortable: true,
          sortType: 'desc',
          width: 180
        },
        {
          title: '操作',
          key: 'action',
          width: 280,
          align: 'center',
          fixed: 'right',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'warning',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  directives: [
                    {
                      name: 'has',
                      value: 'edit'
                    }
                  ],
                  on: {
                    click: () => {
                      this.edit(params.row)
                    }
                  }
                },
                '编辑'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  directives: [
                    {
                      name: 'has',
                      value: 'delete'
                    }
                  ],
                  on: {
                    click: () => {
                      this.remove(params.row)
                    }
                  }
                },
                '删除'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'volcano',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  directives: [
                    {
                      name: 'has',
                      value: 'pause'
                    }
                  ],
                  on: {
                    click: () => {
                      this.pause(params.row)
                    }
                  }
                },
                '暂停'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  directives: [
                    {
                      name: 'has',
                      value: 'resume'
                    }
                  ],
                  on: {
                    click: () => {
                      this.resume(params.row)
                    }
                  }
                },
                '恢复'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  directives: [
                    {
                      name: 'has',
                      value: 'run'
                    }
                  ],
                  on: {
                    click: () => {
                      this.run(params.row)
                    }
                  }
                },
                '运行'
              )
            ])
          }
        }
      ],
      data: [],
      total: 0
    }
  },
  methods: {
    init() {
      this.getScheduleList()
    },
    changePage(v) {
      this.searchForm.current = v
      this.getScheduleList()
      this.clearSelectAll()
    },
    changePageSize(v) {
      this.searchForm.size = v
      this.getScheduleList()
    },
    getScheduleList() {
      // 多条件搜索用户列表
      this.loading = true
      let params = {
        limit: this.searchForm.size,
        page: this.searchForm.current,
        beanName: this.searchForm.beanName
      }
      getSchedulePageList(params).then(res => {
        this.loading = false
        if (res.code == 0) {
          this.data = res.data.list
          this.total = res.data.totalCount
        }
      })
    },
    handleSearch() {
      this.searchForm.current = 1
      this.searchForm.size = 20
      this.getScheduleList()
    },
    handleReset() {
      this.$refs.searchForm.resetFields()
      this.searchForm.beanName = ''
      this.searchForm.current = 1
      this.searchForm.size = 20
      // 重新加载数据
      this.getScheduleList()
    },
    changeSort(e) {
      this.searchForm.sort = e.key
      this.searchForm.order = e.order
      if (e.order == 'normal') {
        this.searchForm.order = ''
      }
      this.getScheduleList()
    },

    submitSchedule() {
      this.$refs.scheduleForm.validate(valid => {
        if (valid) {
          if (this.modalType == 0) {
            this.submitLoading = true
            addSchedule(this.scheduleForm).then(res => {
              this.submitLoading = false
              if (res.code == 0) {
                this.$Message.success('操作成功')
                this.getScheduleList()
                this.scheduleModalVisible = false
              } else {
                this.$Message.error(res.msg)
              }
            })
          } else {
            // 编辑
            this.submitLoading = true

            updateSchedule(this.scheduleForm).then(res => {
              this.submitLoading = false
              if (res.code == 0) {
                this.$Message.success('操作成功')
                this.getScheduleList()
                this.scheduleModalVisible = false
              } else {
                this.$Message.error(res.msg)
              }
            })
          }
        }
      })
    },
    add() {
      this.modalType = 0
      this.modalTitle = '新增任务'
      this.$refs.scheduleForm.resetFields()
      this.scheduleModalVisible = true
    },
    edit(v) {
      this.modalType = 1
      this.modalTitle = '编辑任务'
      this.$refs.scheduleForm.resetFields()
      for (let attr in v) {
        if (v[attr] == null) {
          v[attr] = ''
        }
      }
      this.scheduleForm = JSON.parse(JSON.stringify(v))
      this.scheduleModalVisible = true
    },
    remove(v) {
      this.$Modal.confirm({
        title: '确认删除',
        content: '您确认要删除任务 ' + v.beanName + ' ?',
        loading: true,
        onOk: () => {
          deleteSchedule([v.jobId]).then(res => {
            this.$Modal.remove()
            if (res.code == 0) {
              this.$Message.success('删除成功')
              this.getScheduleList()
            } else {
              this.$Message.error(res.msg)
            }
          })
        }
      })
    },
    pause(v) {
      this.$Modal.confirm({
        title: '确认暂停',
        content: '您确认要暂停任务 ' + v.beanName + ' ?',
        loading: true,
        onOk: () => {
          pauseSchedule([v.jobId]).then(res => {
            this.$Modal.remove()
            if (res.code == 0) {
              this.$Message.success('暂停成功')
              this.getScheduleList()
            } else {
              this.$Message.error(res.msg)
            }
          })
        }
      })
    },
    resume(v) {
      this.$Modal.confirm({
        title: '确认恢复',
        content: '您确认要恢复任务 ' + v.beanName + ' ?',
        loading: true,
        onOk: () => {
          resumeSchedule([v.jobId]).then(res => {
            this.$Modal.remove()
            if (res.code == 0) {
              this.$Message.success('恢复成功')
              this.getScheduleList()
            } else {
              this.$Message.error(res.msg)
            }
          })
        }
      })
    },
    run(v) {
      this.$Modal.confirm({
        title: '确认运行',
        content: '您确认要运行任务 ' + v.beanName + ' ?',
        loading: true,
        onOk: () => {
          runSchedule([v.jobId]).then(res => {
            this.$Modal.remove()
            if (res.code == 0) {
              this.$Message.success('运行成功')
              this.getScheduleList()
            } else {
              this.$Message.error(res.msg)
            }
          })
        }
      })
    },
    showSelect(e) {
      this.exportData = e
      this.selectList = e
      this.selectCount = e.length
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false)
    },
    delAll() {
      if (this.selectCount <= 0) {
        this.$Message.warning('您还未选择要删除的数据')
        return
      }
      this.$Modal.confirm({
        title: '确认删除',
        content: '您确认要删除所选的 ' + this.selectCount + ' 条数据?',
        loading: true,
        onOk: () => {
          let ids = ''
          this.selectList.forEach(function(e) {
            ids += e.id + ','
          })
          ids = ids.substring(0, ids.length - 1)
          deleteSchedule(ids).then(res => {
            this.$Modal.remove()
            if (res.success) {
              this.$Message.success('删除成功')
              this.clearSelectAll()
              this.getUserList()
            }
          })
        }
      })
    }
  },
  mounted() {
    this.init()
  }
}
</script>